<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    title="新增生产版本"
    :destroy-on-close="true"
    draggable
    :align-center="true"
    style="max-width: 400px"
  >
    <el-form
      ref="formRef"
      :model="formData"
      label-width="90"
      style="width: 95%"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="工厂" prop="plantId" label-width="100px">
            <el-select
              style="width: 100%"
              v-model="formData.plantId"
              placeholder="请选择工厂"
              clearable
              @change="getProcessTemplate"
            >
              <el-option
                v-for="item in plantIdList"
                :key="item.id"
                :label="item.organizationName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="工艺路线模版"
            prop="processTemplate"
            label-width="100px"
          >
            <el-select
              style="width: 100%"
              v-model="formData.processTemplate"
              placeholder="请选择工艺路线模版"
              clearable
            >
              <el-option
                v-for="item in processTemplate"
                :key="item.id"
                :label="item.routingTemplateName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="next">下一步</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import useEvent from "@/utils/useEvent";
import { productionVersionHook } from "@/views/mes/produceVersion/hook/productionVersionHook";
import request from "@/utils/request";

const { eventBusEmit, eventBusOn } = useEvent();
const { event, api } = productionVersionHook();
defineOptions({
  name: "PRODUCTIONVERSIONPROCESSTEMPLATE",
  inheritAttrs: false,
});
const visibleDialog = ref(false);

const closeDialog = () => {
  visibleDialog.value = false;
  resetForm();
};
onMounted(() => {
  eventBusOn(event.addEvent, () => {
    visibleDialog.value = true;
  });
  getPlantIdList();
});
const formData = reactive({
  plantId: "",
  plantCode: "",
  processTemplate: "",
});

const resetForm = () => {
  formData.plantId = "";
  formData.plantCode = "";
  formData.processTemplate = "";
  processTemplate.value = [];
};

const plantIdList = ref([]);

const getPlantIdList = async () => {
  const { data } = await request({
    url: api.getPlantIdList,
    method: "post",
    data: { organizationType: 3 },
  });
  plantIdList.value = data;
};
const processTemplate = ref([]);

const getProcessTemplate = async (plantId) => {
  const { data } = await request({
    url: api.getProcessTemplate,
    method: "post",
    data: {
      plantId,
    },
  });
  processTemplate.value = data;
};

const next = () => {
  if (!formData.plantId) {
    ElMessage.error("请选择工厂");
    return;
  }
  if (!formData.processTemplate) {
    ElMessage.error("请选择工艺路线模版");
    return;
  }
  const find = plantIdList.value.find((item) => item.id === formData.plantId);
  formData.plantCode = find?.organizationCode;
  eventBusEmit(event.editByTemplateEvent, formData);
  closeDialog();
};
</script>
